import 'package:cows_bulls_game/consts/app_consts.dart';
import 'package:cows_bulls_game/model/screen_dimensions.dart';
import 'package:cows_bulls_game/ui/common/turn_history_widgets/consts/turn_history_images.dart';
import 'package:cows_bulls_game/ui/instructions_screen/close_instructions_button.dart';
import 'package:cows_bulls_game/ui/instructions_screen/const/instructions_colors.dart';
import 'package:cows_bulls_game/ui/instructions_screen/const/instructions_consts.dart';
import 'package:cows_bulls_game/ui/main_screen/consts/main_screen_images.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';

class InstructionsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ScreenDimensions dimensions = ScreenDimensions(context);
    return Scaffold(      
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.dark,
        child: Container(
          color: instructionsBackColor,
          child: Row(
            children: [
              Expanded(
                child: Stack(
                  children: [
                    _buildBackgroundImage(dimensions),                    
                    Column(                      
                      children: [
                        _buildMainScreenTitle(dimensions),
                        _buildRulesTitle(dimensions),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                              horizontal: dimensions.width * 0.05
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children:[
                                _buildFirstPartText(dimensions),
                                SizedBox(height: dimensions.withoutSafeAreaHeight * 0.03),
                                _buildBullRow(dimensions),
                                SizedBox(height: dimensions.withoutSafeAreaHeight * 0.03),
                                _buildCowsRow(dimensions),                                
                              ]
                            ),                            
                          ),
                        ),                        
                      ]
                    ),
                    Column(                      
                      children: [
                        Spacer(),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            _buildCloseButton(context, dimensions)
                          ],
                        ),                        
                        SizedBox(height: dimensions.withoutSafeAreaHeight * 0.03)   
                      ],
                    )                    
                  ]
                )                                                       
              )
            ]
          )                    
        ),
      ),
    );    
  }

  Widget _buildCloseButton(BuildContext context, ScreenDimensions dimensions) {
    return GestureDetector(
      onTap: () => Navigator.of(context).pop(),
      child: CloseInstructionsButton("我知道了", dimensions)
    );
  }

  Widget _buildCowsRow(ScreenDimensions dimensions) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        SvgPicture.asset(
          cowImage,width: 20,
        ),
        Flexible(
          child: Padding(
            padding: EdgeInsets.only(left: dimensions.withoutSafeAreaHeight * 0.02),
            child: Text(
              "存在正确的数字，但位置不正确",
              style: TextStyle(
                fontFamily: AppConsts.FONT_FAMILY_NAME,
                fontSize: 14,
                color: instructionsMainTextColor
              )
            ),
          ),
        )
      ]
    );
  }

  Widget _buildBullRow(ScreenDimensions dimensions) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        SvgPicture.asset(
          bullImage,width: 20,
        ),
        Flexible(
          child: Padding(
            padding: EdgeInsets.only(left: dimensions.withoutSafeAreaHeight * 0.02),
            child: Text(
                "数字和位置都是正确的",
                style: TextStyle(
                  fontFamily: AppConsts.FONT_FAMILY_NAME,
                  fontSize: 14,
                  color: instructionsMainTextColor
                )
              ),
          ),
        )
      ]
    );
  }

  Widget _buildFirstPartText(ScreenDimensions dimensions) {
    return Flexible(
      child: Text(        
        firstPartText,        
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: AppConsts.FONT_FAMILY_NAME,
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: instructionsMainTextColor
        ),
      ),
    );
  }

  Widget _buildRulesTitle(ScreenDimensions dimensions) {
    return Padding(
      padding: EdgeInsets.only(
        left: dimensions.withoutSafeAreaHeight * 0.05,
        right: dimensions.withoutSafeAreaHeight * 0.05,
        top: dimensions.withoutSafeAreaHeight * 0.05,
        bottom: dimensions.withoutSafeAreaHeight * 0.05
      ),
      child: Text(
        "游戏规则",
        style: TextStyle(
          fontFamily: AppConsts.FONT_FAMILY_NAME,
          fontSize: 24,
          color: Color.fromARGB(255, 220, 74, 16)
        ),
      ),
    );
  }

  Widget _buildBackgroundImage(ScreenDimensions dimensions) {
    return SvgPicture.asset(
      backElementsImage,                
      width: dimensions.width,
    );
  }

  Widget _buildMainScreenTitle(ScreenDimensions dimensions) {
    return Column(
      children: [
        SizedBox(height: dimensions.withoutSafeAreaHeight * 0.09),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
                child: Stack(
              children: <Widget>[
                Text(
                  'Bingo数字解密',
                  style: TextStyle(
                    fontSize: 40,
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 16
                      ..color = Color.fromARGB(255, 75, 30, 7),
                  ),
                ),
                // Solid text as fill.
                Text(
                  'Bingo数字解密',
                  style: TextStyle(
                    fontSize: 40,
                    color: Color.fromARGB(255, 220, 74, 16),
                  ),
                ),
              ],
            ))                
          ]
        ),
      ]
    );
  }
}